<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>微博</title>
	<script src="../lib/react.development.js"></script>
	<script src="../lib/react-dom.development.js"></script>
	<script src="../lib/babel.min.js"></script>
	<link href="style/weibo.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="jyArea">

</div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector(".jyArea"));
	class App extends React.Component{
		contentRef = React.createRef();
		state = {
			contentList:[]
		}
		getWeibo(){
			fetch("http://127.0.0.1/weibo?pageSize=100").then(response=>{
				return response.json()
			}).then(value=>{
				console.log(value);
				this.setState({
					contentList:value.contentList
				})
			})
		}
		render(){
			return (
				<>
					<div className="takeComment">
						<textarea ref={this.contentRef} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
						<div className="takeSbmComment">
							<input onClick={()=>{
								// axios
								const content = this.contentRef.current.value.trim();
								const xhr = new XMLHttpRequest();
								xhr.responseType = "json";
								xhr.open("post","http://127.0.0.1/weibo");
								xhr.setRequestHeader("Content-Type","application/json");
								xhr.send(JSON.stringify({
									content
								}));
								xhr.onload = ()=>{
									if(xhr.response.ok === 1) {
										this.contentRef.current.value = null;
										this.getWeibo();
									}
									else{
										alert(xhr.response.msg);
									}
								}
							}} type="button" className="inputs" value=""/>
						</div>
					</div>
					<div className="commentOn">
						<div style={{display:this.state.contentList.length>0?"none":"block"}} className="noContent">暂无留言</div>
						<div className="messList">
							{
								this.state.contentList.map(item=> (
									<div key={item._id} className="reply">
										<p className="replyContent">{item.content}</p>
										<p className="operation">
											<span className="replyTime">{item.addTime}</span>
											<span className="handle">
						                        <a href="#" className="top">{item.topNum}</a>
						                        <a href="#" className="down_icon">{item.downNum}</a>
						                        <a href="#" className="cut">删除</a>
						                    </span>
										</p>
									</div>
								))
							}
						</div>
						<div className="page">
							<a href="javascript:;" className="active">1</a>
							<a href="javascript:;">2</a>
							<a href="javascript:;">3</a>
						</div>
					</div>
				</>
			)
		}
		
		componentDidMount() {
			this.getWeibo();
		}
	}
	
	root.render(<App/>);

</script>
</html>
